<!DOCTYPE html>
<html lang="en" class="h100">
<head>
    <title>排行榜 - {$web_title}</title>
    {include file='public/public_head' /}
</head>
<body class="h100 over">
    <div class="main-wrap result-wrap pc-wrap over">
        <div class="content flex ccc pos-r">
            <section class="part1 pos-a">
                <ul id="rowsA" class="rows">
                    {volist name="staff_list" id="item"}
                    <li id="row{$key+1}" class="row {if $key < 1}row1{/if} pos-r transition-e3"></li>
                    {/volist}
                </ul>
                <div class="classNames over">
                    {volist name="staff_list" id="item"}
                    <ul class="c">
                        <li id="className1" class="className">{$item.nickname}</li>
                    </ul>
                    {/volist}
                </div>
            </section>
        </div>
    </div>
    <div class="main-wrap index-wrap mobile-wrap none">
        <div class="content">
            <!-- banner-wrap -->
            <div class="banner-wrap index-banner-wrap">
                <div class="swiper-container index-swiper-container">
                    <div class="swiper-wrapper">
                        {volist name="banner_list" id="item"}
                        <div class="swiper-slide pic-wrap">
                            <img src="{$item.img | default='__INDEX__/img/default_pic.jpg'}" alt="" class="swiper-slide-img pic-img index-banner-img" />
                        </div>
                        {/volist}
                    </div>
                    <div class="swiper-pagination index-swiper-pagination"></div>
                </div>

            </div>

            <!-- list-wrap -->
            <ul class="list-wrap user-list-wrap flex wrap">
                {volist name="staff_list" id="item"}
                <li class="list-item user-list-item">
                    <div class="pic-wrap user-pic-wrap">
                        <img src="{$item.profile_pic | default='__INDEX__/img/default_pic.jpg'}" alt="" class="pic-img user-pic-img" />
                    </div>
                    <div class="user-info-wrap">
                        <div class="user-top-wrap flex rcb">
                            <div class="name-wrap flex rcs">
                                <div class="user-name">{$item.nickname}</div>
                                <div class="user-age">{$item.real_name}{if $item.vid} ({$item.score}){/if}</div>
                            </div>
                            <div class="btn-item vote-btn-item flex ccc" {if !$item.vid}onclick="openVotePopup({$item.id}, {$current_vote_id})"{/if}>
                                <span class="btn-item-title">{if $item.vid}已投({$item.v_score}){else /}点我投票{/if}</span>
                            </div>
                        </div>
                        <div class="user-profile text-line line-2">{$item.profile}</div>
                    </div>
                </li>
                {/volist}
            </ul>
            <div class="btn-wrap fix-btn-wrap pos-f">
                <a class="btn-item fa fa-home flex ccc" href="/">返回首页</a>
            </div>

        </div>
    </div>
    {include file='public/public_script' /}
    {include file='public/footer' /}
</body>
<script>
    window.onload = function() {
        var count = 0;
        // 实时刷新
        function update() {
            var url = '{:url("index/get_vote_result")}';
            var data = {};
            $.post(url, data, function(result) {
                if (result.code === 1) {
                    var height = result.data;
                    if (count > 3 && height.length !== $('#rowsA li').length) {
                        window.location.reload();
                    } else {
                        rowHeight(400, height);
                    }
                    count++;
                }
            });
        }
        update();
        setInterval(update, 1000); // 刷新时间间隔
    }

    function rowHeight(max, height) {
        // itemheight / maxHeight = h / max;
        // 所以 itemheight = h / max * maxHeight;
        var maxHeight = 435;
        var i = 0;
        var TopNode = new Array();
        var Top = 0;
        for (var h in height) {
            var item = height[h] * 1;
            i++;
            var itemheigth = item / max * maxHeight;
            var node = document.getElementById('row' + i);
            node.innerHTML = '<span class="t">' + height[h] + '</span>';
            node.style.height = (itemheigth) + 'px';
            node.style.background = "#f90";
            if (Top < item) {
                Top = item;
                TopNode = new Array();
                TopNode.push(node);
            } else if (Top == item) {
                TopNode.push(node);
            }
        }
        for (var i in TopNode) {
            console.log('TopNode---->', TopNode);
            TopNode[i].style.background = "#DB4545";
        }
    }

</script>
</html>